<template>
  <div class="health-view">
    <div class="health-header">
      <Title title="健康值" font-size="16px"/>
      <el-button v-if="hasRouteAuth(auth) && isBtn" type="primary" plain size="small" style="background:#fff;color:#406EFF;width: 64px;padding:7px 0;margin-left: 32px;" @click="handleSet">设置</el-button>
      <span v-if="hasRouteAuth(auth) && !isBtn" class="link" @click="handleSet">设置</span>
    </div>
    <div class="health-content">
      <u-table
        v-if="list.length > 0"
        ref="healthRef"
        :data="list"
        :border="true"
        :row-height="49"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
      >
        <u-table-column align="left" label="发文时长" min-width="120">
          <template slot-scope="scope">
            <div>发文{{ scope.row.time }}小时内</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="转发">
          <template slot-scope="scope">
            <ToolTip :class="isWarning(scope.row.id, 'forward') ? 'warning' : ''" :content="scope.row.forward" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="评论">
          <template slot-scope="scope">
            <ToolTip :class="isWarning(scope.row.id, 'comment') ? 'warning' : ''" :content="scope.row.comment" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="点赞">
          <template slot-scope="scope">
            <ToolTip :class="isWarning(scope.row.id, 'like') ? 'warning' : ''" :content="scope.row.like" />
          </template>
        </u-table-column>
      </u-table>
      <empty-placeholder v-else style="margin-bottom: 24px" />
    </div>
    <HealthValue ref="healthValueSet" :list="list" @submit="handleHealthValueSet" />
  </div>
</template>

<script>
import HealthValue from '@/components/HealthValue';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { hasRouteAuth } from '@/utils/permission';
import { compare } from './utils';
import emptyIcon from '@/assets/home/emptyIcon.png';
export default {
  components: {
    HealthValue,
    Title,
    EmptyPlaceholder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    isBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyIcon,
      auth: '',
      healthList: []
    };
  },
  watch: {
    'list': function(val) {
      const temp = val.slice();
      this.healthList = temp.sort(compare('time'));
    }
  },
  created() {
    this.auth = this.$route.name === 'systemSetting' ? 'system:operate:health' : 'crm:accounts:health';
  },
  methods: {
    hasRouteAuth,
    handleSet() {
      this.$refs['healthValueSet'].openDialog();
    },
    handleHealthValueSet(params) {
      this.$emit('setHealthValue', params);
    },
    handleClose() {
      this.$refs['healthValueSet'].handleClose();
    },
    isWarning(id, value) {
      const index = this.list.map(item => item.id).indexOf(id); // 通过id查找在list中的索引
      if (index === 0) return false;
      return this.list[index][value] < this.list[index - 1][value];
    }
  }
};
</script>

<style lang="scss" scoped>
.health-view {
  .health-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  .health-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16px;
    .child-item {
      flex: 1;
      margin-right: 16px;
    }
  }
  .link {
    color: #406eff;
    cursor: pointer;
    line-height: 16px;
    margin-left: 12px;
  }
  .label {
    color: #999;
  }
  .text {
    color: #333;
  }
  .warning {
    color: red;
  }
  .health-content {
    margin-bottom: 32px;
  }
}
</style>
